<template>
    <div class="main-index">
        <div class="main-index-header">
            <FormComponent ref="FormComRef" :field-colums="FormCon" :isinline="true" :isrule="rules" @submit="GetFromModel">
            </FormComponent>
        </div>
        <IndexContent :postpage="CardData" :disabled="disabled" :loading="loading" @loadData="loadData" />
    </div>
</template>

<script setup lang="ts">
import FormComponent from "@components/FormComponent/FormComponent.vue";
import IndexContent from "@views/index/cpns/IndexContent.vue";
import { rules } from "./config/form-config";
import { useCollege } from "@store/collegeinfo";
import { ref, watch } from "vue";
import { post_get } from "@/api/postapi";
import { Tpost } from "@/models/post";
import { RandomPicture } from "@/utils/randompic";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import { get_major } from "@api/college";

const FormComRef = ref<InstanceType<typeof FormComponent>>();
const CardData = ref<Array<Tpost>>([]);
const current = ref<number>(0);
const disabled = ref<boolean>(false);
const loading = ref<boolean>(false);
const totalpost = ref<number>(0);
const { FormCon } = storeToRefs(useCollege())
const college = ref<string>("");

const GetFromModel = async (formData) => {
    if (college.value !== formData.value.college) {
        if(!formData.value.college) {
            FormCon.value[1].options = [];
        } else {
            const res = await get_major({ college: formData.value.college });
            if (res.code === 200) {
                FormCon.value[1].options = [];
                res.data.forEach((item) => {
                    FormCon.value[1].options.push({
                        value: item,
                        label: item
                    })
                })
            }
        }   
    }
    college.value = formData.value.college;
    //这里写获取帖子请求
    current.value = 1;
    CardData.value = [];
    disabled.value = false;
    loading.value = true;
    const res = await post_get({ current: current.value, size: 8, ...formData.value });
    if (res.code === 200) {
        loading.value = false;
        if (res.data) {
            res.data.records.forEach((item) => {
                item.pic = RandomPicture();
            })
            CardData.value = CardData.value.concat(res.data.records);
            totalpost.value = res.data.total;
        } else {
            disabled.value = true;
        }
        ElMessage.success("查询成功！")
    }
};

const loadData = async () => {
    //初始化走的地方
    current.value++;
    loading.value = true;
    const res = await post_get({ current: current.value, size: 8, ...FormComRef.value.formData });
    if (res.code === 200) {
        res.data.records.forEach((item) => {
            item.pic = RandomPicture();
        })
        CardData.value = CardData.value.concat(res.data.records);
        totalpost.value = res.data.total;
        loading.value = false;
    }
}

watch(() => CardData.value, () => {
    if (CardData.value.length === totalpost.value) {
        disabled.value = true;
    }
})

</script>

<style scoped lang="less">
.main-index {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;

    .main-index-header {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
}
</style>
